<template>
  <div class="sales divBox">
    <el-card class="box-card" shadow="hover">
      <template v-slot:header class="clearfix">
        <div class="container">
          <el-form ref="salesRefs" :model="tableFrom" label-width="100px" class="salesCls">
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="订单状态：">
                  <el-radio-group @change="getTableList(1)" v-model="tableFrom.state" class="mr20" size="small">
                    <el-radio-button :label="item.key" v-for="(item, index) in stateGroup" :key="index">{{ item.label }}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="订单类型：">
                  <el-radio-group @change="getTableList(1)" v-model="tableFrom.type" class="mr20" size="small">
                    <el-radio-button :label="item.key" v-for="(item, index) in typeGroup" :key="index">{{ item.label }}</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-bind="grid">
                <el-form-item label="订单号：">
                  <el-input v-model="tableFrom.keyword" placeholder="请输入订单号" size="small" class="search-select" clearable>
                    <template v-slot:append>
                      <el-button @click.native="getTableList(1)" icon="el-icon-search" size="small" />
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
      <el-table
        v-loading="tableLoading"
        :data="tableList"
        style="width: 100%;"
        size="mini"
        class="table"
      >
        <el-table-column prop="orderNo" label="订单号" min-width="150">
          <template slot-scope="{ row }">
            <span v-text="row.orderNo" style="display: block"></span>
            <span v-show="row.isDel === 1" style="color: #ed4014; display: block">用户已删除</span>
          </template>
        </el-table-column>
        <el-table-column label="用户信息" min-width="100">
          <template slot-scope="{ row }">
            <span v-if="row.user">{{ row.user.realName || row.user.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品信息" min-width="330">
          <template slot-scope="{ row }">
            <div class="tabBox" v-for="(item, index) in row.orderItems" :key="index">
              <div class="tabBox_img" v-viewer>
                <img style="cursor: pointer;" v-lazy="$uploadURL(item.productAttrValue ? item.productAttrValue.image : item.productAttrValue.product.image)"/>
              </div>
              <span class="tabBox_tit">{{ item.productAttrValue.product.title + " | " }}{{ item.productAttrValue.suk ? item.productAttrValue.suk : "" }}</span>
              <span class="tabBox_pice">{{ "￥" + item.price + " x " + item.num }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="实际支付" min-width="70" prop="payPrice"></el-table-column>
        <el-table-column label="发起退款时间" min-width="100">
          <template slot-scope="{ row }">
            <span v-if="row.refundDateUTC">{{ row.refundDateUTC | uctTimeFileter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="退款类型" min-width="100">
          <template slot-scope="{ row }">
            <div v-if="row.refundType == 1">仅退款</div>
            <div v-else-if="row.refundType == 2">退货退款</div>
          </template>
        </el-table-column>
        <el-table-column label="退款信息" min-width="120">
          <template slot-scope="{ row }">
            <div v-if="row.refundState != 0 && row.refundType != 0 && row.refundState == 1">
              <div class="refundInfo">
                <b style="color: rgb(255, 0, 0); font-size: 12px;">申请退款</b><br/>
                <span>退款原因：{{ row.refundWapReason }}</span><br/>
                <span>备注说明：{{ row.refundWapExplain }}</span><br/>
                <span v-if="row.refundDateUTC">退款时间：{{ row.refundDateUTC | uctTimeFileter }}</span>
              </div>
              <div v-if="row.refundWapImg.length">
                <span style="font-size: 12px;">退款凭证：{{ row.refundWapImg.length > 0 ? '' : '无' }}</span><br/>
                <div class="voucherImg" v-viewer v-for="(item, index) in row.refundWapImg.split(',')" :key="index">
                  <img v-lazy="$uploadURL(item)" :alt="$uploadURL(item)"/>
                </div>
              </div>
            </div>
            <div v-else>
              <div v-if="row.refundState == 1">申请中</div>
              <div v-else-if="row.refundState == 2">
                <div>拒绝退款</div>
                <div>原因：{{ row.refundReason }}</div>
              </div>
              <div v-else-if="row.refundState == 3">商品待退货</div>
              <div v-else-if="row.refundState == 4">
                <div>商品待收货</div>
                <div>单号：{{ row.refundWapExpress }}</div>
              </div>
              <div v-else-if="row.refundState == 5">已退款</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="150"
          class-name="fixed-column"
        >
          <template slot-scope="{ row }">
            <el-dropdown>
              <span class="el-dropdown-link">
                更多<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="orderInfo(row.id)">订单详情</el-dropdown-item>
                <el-dropdown-item @click.native="toRecord(row.id)">订单记录</el-dropdown-item>
                <el-dropdown-item v-if="[1].includes(row.refundState) && row.refundType != 0" @click.native="getNoRefundData(row.id, row.orderNo)">不退款</el-dropdown-item>
                <el-dropdown-item v-if="[1].includes(row.refundState) && row.refundType != 0 && row.refundType == 2" @click.native="getRefundData(row.id, 2, row.orderNo)">同意退货</el-dropdown-item>
                <el-dropdown-item v-if="[1, 2, 3, 4].includes(row.refundState) && row.refundType != 0" @click.native="getRefundData(row.id, 1, row.orderNo)">立即退款</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="replyBox">
        <pagination
          v-show="pagination.total > 0"
          :total="pagination.total"
          :page.sync="pagination.page"
          :limit.sync="pagination.limit"
          :page-sizes="[10, 20, 30, 50]"
          @pagination="replyChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
  import {
    getOrderRefundList,
    orderDetailApi as getDataInfoNew,
    getReturnRefund as getReturnRefundApi
  } from '@/api/order';

  export default {
    name: 'Index',
    data() {
      return {
        grid: {
          xl: 5,
          lg: 7,
          md: 12,
          sm: 12,
          xs: 24
        },
        tableLoading: false,
        tableList: [],
        stateGroup: this.$constants.orderStateGroup,
        typeGroup: this.$constants.orderTypeGroup,
        tableFrom: {
          state: -99,
          type: -99,
          keyword: ''
        },
        pagination: {
          page: 1,
          limit: 10,
          total: 0
        }
      };
    },
    mounted() {
      this.getTableList();
    },
    methods: {
      /**
       * 退货/退款
       */
      getRefundData(id, type, orderNo) {
        const _this = this;

        if (type == 2) {
          _this.$confirm('退货退款', {
            title: '退货退款',
            message: this.$createElement('div', null, ['是否立即退货退款?', '退货退款通过后将无法恢复，请谨慎操作！'].map((item) => this.$createElement('p', null, item))),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            getReturnRefundApi(id).then(() => {
              _this.$message.success('同意退货退款成功');
              _this.getTableList('1');
            });
          }).catch(() => {
            _this.$message({
              type: 'info',
              message: '已取消退货退款'
            });
          });
        } else {
          _this.$modal({
            componentProps: {
              orderId: id,
              orderNo: orderNo
            },
            component: (resolve) => require(['./components/orderRefundImmediately'], resolve),
            props: {
              title: '退款处理',
              customClass: 'zdyDialogCls orderRefundImmediatelyDialogCls',
              width: '100%'
            },
            methods: {
              getRefundImmediately() {
                _this.getTableList('1');
              }
            }
          });
        };
      },
      /**
       * 不退款
       */
      getNoRefundData(id, orderNo) {
        const _this = this;
        _this.$modal({
          componentProps: {
            orderId: id,
            orderNo: orderNo
          },
          component: (resolve) => require(['./components/orderNoRefund'], resolve),
          props: {
            title: '不退款原因',
            customClass: 'zdyDialogCls orderNoRefundDialogCls',
            width: '100%'
          },
          methods: {
            getNoRefund() {
              _this.getTableList('1');
            }
          }
        });
      },
      /**
       * 订单记录
       */
      toRecord(orderId) {
        const _this = this

        _this.$modal({
          componentProps: {
            id: orderId
          },
          component: (resolve) => require(['@/components/orderRecord/index'], resolve),
          props: {
            title: '订单记录',
            customClass: 'zdyDialogCls recordDialogCls',
            width: '100%'
          },
          methods: {}
        })
      },
      /**
       * 订单详情
       */
      orderInfo(id) {
        const _this = this;

        _this.$modal({
          componentProps: {
            orderId: id
          },
          component: (resolve) => require(['./components/orderInfo'], resolve),
          props: {
            title: '订单信息',
            customClass: 'zdyDialogCls orderInfoDialogCls',
            width: '100%'
          },
          methods: {

          }
        });
      },
      /**
       * 获取退款订单
       * @param num
       */
      getTableList(num) {
        this.$set(this, 'tableLoading', true);
        getOrderRefundList({
          pageNumber: num ? num : this.pagination.page,
          pageSize: this.pagination.limit,
          orderBy: 'RefundDateUTc desc',
          keyword: this.tableFrom.keyword,
          refundState: this.tableFrom.state == -99 ? 0 : this.tableFrom.state,
          refundType: this.tableFrom.type == -99 ? 0 : this.tableFrom.type
        }).then(res => {
          this.$set(this, 'tableList', res.data);
          this.$set(this.pagination, 'total', res.head.totalCount);
          this.$set(this, 'tableLoading', false);
        }).catch(() => {
          this.$set(this, 'tableLoading', false);
          this.$set(this.pagination, 'total', 0);
          this.$set(this, 'tableList', []);
        });
      },
      replyChange(reply) {
        this.$set(this.pagination, 'page', reply.page);
        this.$set(this.pagination, 'limit', reply.limit);
        this.getTableList();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .sales {
    .tabBox {
      display: flex;
      align-items: center;
      width: 100%;
      height: 100%;
      .tabBox_tit {
        width: 60%;
        font-size: 12px;
        margin: 0 2px 0 10px;
        letter-spacing: 1px;
        padding: 5px 0;
        box-sizing: border-box;
      }
    }
    .fixed-column {
      .el-dropdown-link {
        cursor: pointer;
        color: #409eff;
        font-size: 12px;
      }
    }
    .voucherImg {
      width: 25px;
      height: 25px;
      display: inline-block;
      margin-right: 5px;
      cursor: pointer;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>

<style lang="scss">
  .el-dialog.orderRefundImmediatelyDialogCls {
    max-width: 700px;
  }
  .el-dialog.orderNoRefundDialogCls {
    max-width: 700px;
  }
  .el-dialog.orderInfoDialogCls {
    max-width: 700px;
  }
  .el-dialog.recordDialogCls {
    max-width: 700px;
  }
</style>
